<template>
  <el-container>
    <el-header>
      <div>
        <i style="font-size: 32px" class="iconfont icon-kuajingdianshang"></i
        >&nbsp; 智慧泊车后台管理系统
      </div>
      <div>
        <i
          style="margin-right: 10px; font-size: 28px"
          class="iconfont icon-yonghu"
        ></i>

        <div class="sub-title">欢迎您{{ adminNickname }}用户</div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
        </div>

        <el-button class="quit" style="letter-spacing: 3px" @click="adminExit()"
          >退出</el-button
        >
      </div>
    </el-header>
    <el-container>
      <el-aside :width="iscoll ? '64px' : '200px'">
        <div class="top" @click="iscoll = !iscoll">|||</div>
        <el-menu
          default-active
          :collapse="iscoll"
          unique-opened
          :collapse-transition="false"
          background-color="#353D41"
          text-color="#fff"
          active-text-color="#00A0FF"
          router
        >
          <!--<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">-->
          <!--	<template slot="title">-->
          <!--		<i :class="iconsObj[item.id]"></i>-->
          <!--		<span>{{item.realName}}</span>-->
          <!--	</template>-->
          <!--	<el-menu-item :index="'/' + itemChildren.path" v-for="itemChildren in item.children"-->
          <!--								:key="itemChildren.id"><i class="el-icon-menu"></i>{{itemChildren.authName}}-->
          <!--	</el-menu-item>-->
          <!--</el-submenu>-->

          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>DashBoard</template
            >
            <el-menu-item-group>
              <el-menu-item index="1-1">数据展示</el-menu-item>
              <el-menu-item index="1-2">数据可视化</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--权限管理-->
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i>员工管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="pushHandler('/home/admin')"
                >管理员管理</el-menu-item
              >
              <el-menu-item index="2-2" @click="pushHandler('/home/inspector')"
                >巡查员管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>用户管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="pushHandler('/home/user')"
                >用户管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title"
              ><i class="el-icon-setting"></i>车辆管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="pushHandler('/home/CarMessage')"
                >车辆管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title"
              ><i class="el-icon-setting"></i>订单管理</template
            >
            <el-menu-item-group>
              <el-menu-item
                index="6-1"
                @click="pushHandler('/home/orderManage')"
                >订单管理</el-menu-item
              >
              <el-menu-item
                index="6-2"
                @click="pushHandler('/home/exceptionOrder')"
                >异常订单管理</el-menu-item
              >
              <el-menu-item
                index="6-2"
                @click="pushHandler('/home/refundOrder')"
                >售后订单管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title"
              ><i class="el-icon-setting"></i>路段管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="7-1">实时路段管理</el-menu-item>
              <el-menu-item
                index="7-2"
                @click="pushHandler('/home/SectionMessage')"
                >路段管理</el-menu-item
              >
              <el-menu-item index="7-3" @click="pushHandler('/home/berth')"
                >泊位管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title"
              ><i class="el-icon-setting"></i>设备管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="8-1" @click="pushHandler('/home/geo')"
                >地磁管理</el-menu-item
              >
              <el-menu-item index="8-2" @click="pushHandler('/home/pda')"
                >手持PDA管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title"
              ><i class="el-icon-setting"></i>反馈管理</template
            >
            <el-menu-item-group>
              <el-menu-item
                index="9-1"
                @click="pushHandler('/home/userFeedback')"
                >用户反馈工单</el-menu-item
              >
              <el-menu-item
                index="9-2"
                @click="pushHandler('/home/insFeedback')"
                >巡检员反馈</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <!-- <el-submenu index="10">
            <template slot="title"
              ><i class="el-icon-setting"></i>财务管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="10-1">资金流水</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->

          <el-submenu index="11">
            <template slot="title"
              ><i class="el-icon-setting"></i>统计管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="11-1" @click="pushHandler('/home/revenue')">营收统计</el-menu-item>
              <!-- <el-menu-item index="11-2">支付统计</el-menu-item>
              <el-menu-item index="11-3">路段统计</el-menu-item>
              <el-menu-item index="11-4">考勤统计</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="12">
            <template slot="title"
              ><i class="el-icon-setting"></i>日志管理</template
            >
            <el-menu-item-group>
              <el-menu-item
                index="12-1"
                @click="pushHandler('/home/SystemLogin')"
                >登陆日志</el-menu-item
              >
              <el-menu-item
                index="12-2"
                @click="pushHandler('/home/SystemRunning')"
                >操作日志</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="13">
            <template slot="title"
              ><i class="el-icon-setting"></i>系统设置</template
            >
            <el-menu-item-group>
              <el-menu-item index="13-1" @click="pushHandler('/home/platInfo')"
                >平台消息</el-menu-item
              >
              <el-menu-item
                index="13-2"
                @click="pushHandler('/home/parameters')"
                >第三方参数设置</el-menu-item
              >
              <el-menu-item
                index="13-3"
                @click="pushHandler('/home/AdminUpdatePwd')"
                >修改密码</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      adminNickname: JSON.parse(sessionStorage.getItem("admin")).adminNickname,
      iscoll: false,
      // iconsObj: {
      // 	125: "el-icon-user",
      // 	103: "el-icon-setting",
      // 	101: "el-icon-goods",
      // 	102: "el-icon-help",
      // 	145: "el-icon-search",
      // },
      circleUrl: JSON.parse(sessionStorage.getItem("admin")).adminAvatar,
      sizeList: ["medium"],
    };
  },
  methods: {
    pushHandler(url) {
      this.$router.push(url);
    },
    adminExit() {
      //退出的时候清除掉session中的admin对象
      sessionStorage.removeItem("admin");
      this.$router.push("/");
    },
  },
};
</script>
<style>
img {
  vertical-align: middle;
}

.el-header div {
  display: flex;
  align-items: center;
}

.el-header {
  display: flex;
  justify-content: space-between;
  color: white !important;
  background-color: #353d41 !important;
}

.quit {
  background-color: #909399 !important;
  border: none !important;
  color: white !important;
  height: 40px;
  line-height: 40px;
}

.quit:hover {
  background-color: #b1b3b8 !important;
}

.top {
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 3px;
  color: white;
  text-align: center;
  font-size: 12px;
  background-color: #485064;
  cursor: pointer;
}

.el-menu {
  border: none !important;
  text-align: left;
}

.el-menu-item {
  text-align: center;
}

.el-container {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 21px;
}

.el-aside {
  background-color: #353d41;
  color: #333;
  text-align: center;
  line-height: 200px;
}
</style>
